<template>
    <ak-page-code>components</ak-page-code>
    <ak-title>AKjs前端框架</ak-title>
    <ak-main>
        <div class="module mt_2 ml_1">
            <section class="fl ml_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">使用方法</h3>
                </fieldset>
                <article class="pos_rel ovh h_35_rem bg_white">
                    <div class="plug_tabs_code wm_96">
                        <nav class="ovh press bg_white">
                            <ul class="ovh list_h_3rem nav_line_c length3">
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">HTML</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">插件调用</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">按需引入</li>
                            </ul>
                        </nav>
                        <article class="pos_rel ovh mt_2">
                            <div class="pos_rel ovh bg_white h_24_rem">
                                <section class="pos_rel ovh h_in">
                                    <!--HTML-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
    <div class="module press plug_DropLoad">
    <ul>
    </ul>
  </div>
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--插件调用-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
      $(function(){
        // 页数
        var page = 0;
        // 每页展示5个
        var size = 5;
        $('.plug_DropLoad').AKjs_DropLoad({
            scrollArea : window, // 滑动区域
            domUp : { // 上方DOM
                domRefresh : '↓ 下拉刷新',
                domUpdate  : '↑ 释放更新',
                domLoad    : '刷新中...'
            },
            domDown : { // 下方DOM
                domRefresh : '↑ 上拉加载更多',
                domLoad    : '加载中...',
                domNoData  : '暂无数据'
            },
            autoLoad : true,// 自动加载
            distance : 20,// 拉动距离
            loadUpFn : function(me){ //上方function
                $.ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php',
                    dataType: 'json',
                    success: function(data){
                        // 为了测试，延迟3秒加载
                        setTimeout(function(){
                            // 每次数据加载完，必须重置
                            me.resetload(); //重新初始化控件以及标识量
                            me.unlock(); //解除锁定允许数据继续加载
                            me.noData(false); //是否有数据（false代表有数据）
                        },1000);
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload(); //重新初始化控件以及标识量
                    }
                });
            },
            loadDownFn : function(me){ //下方function
                page++;
                // 拼接HTML
                var result = '';
                $.ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
                    dataType: 'json',
                    success: function(data){
                        var arrLen = data.length;
                        if(arrLen > 0){
                            for(var i=0; i<arrLen; i++){
                                result
                                    +='     <li class="bg_white ovh mb_5">'
                                    + '        <article class="pos_rel w_100 ovh line_h_18rem">'
                                    + '            <div class="ovh wp_94 mt_1rem mb_05rem pb_05rem">'
                                    + '                <img src="'+data[i].pic+'" class="dis_block fl wh_32rem bg_theme bor_rad_50" />'
                                    + '                <h3 class="fl ovh w_80 ml_05rem">'+data[i].title+'</h3>'
                                    + '            </div>'
                                    + '            <ol class="w_100 ovh bor_top_dashed bor_gray_ddd length2 list_h_3rem">'
                                    + '                <li class="fl text_al_c">订单价格：<em class="c_orange fs_12rem">待定</em></li>'
                                    + '                <li class="fr text_al_c">上市日期：<em class="c_jd">'+data[i].date+'</em></li>'
                                    + '            </ol>'
                                    + '        </article>'
                                    + '     </li>';
                            }
                            // 如果没有数据
                        }else{
                            // 数据锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试，延迟3秒加载
                        setTimeout(function(){
                            // 插入数据到页面，放到最后面
                            $('.plug_DropLoad').children("ul").append(result);
                            // 每次数据插入，必须重置
                            me.resetload(); //重新初始化控件以及标识量
                        },1000);
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload(); //重新初始化控件以及标识量
                    }
                });
            }
        });
    });
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--按需引入-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
   AKjs_Plugin("AKjs_DropLoad","css"); //上拉刷新和下拉加载更多功能
</textarea>
                                </section>
                            </div>
                        </article>
                    </div>
                    <fieldset class="wm_96 mt_2 mb_2">
                        <button type="button" class="plug_submit btn_h_au w_100 bg_theme c_white h_32rem">运行测试</button>
                    </fieldset>
                </article>
            </section>
            <section class="fr mr_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">效果展示</h3>
                </fieldset>
                <article class="pos_rel ova h_35_rem bg_white05">
                    <div class="plug_preview pos_rel ovh pa_2"></div>
                </article>
            </section>
        </div>
    </ak-main>

    <ak-plugin></ak-plugin>

</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-page-code，ak-title，ak-plugin，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-page-code></ak-page-code>
    <ak-title></ak-title>
    <div></div>
    <ak-plugin></ak-plugin>
</template>
<script>
</script>
<style>
</style>
-->